GitHubでMermaid構文の表示機能が強化されていました

若槻龍太

2023.03.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 Delivery部の若槻です。

今回は、GitHubでMermaid構文の表示機能が強化されていたので共有します。

Mermaidとは

Mermaidとは、Markdown構文の拡張ツールで、様々なタイプの図（Diagram）をコードやテキストで記述し、視覚的に表示することができます。

Mermaid構文を利用することにより、次のような図をMarkdownで記述することができます。

Flowchart
Sequence Diagram
Gantt Chart
Class Diagram
State Diagram
Pie Chart
Git Graph

公式サイトより引用

GitHubでのMermaid構文の表示機能が強化されていた

GitHubではMermaid構文をサポートしており、MarkdownファイルにMermaid構文を記述することで、図を表示することができます。

このMermaid構文の表示機能がいつの間にか強化されていました。

以前はMermaidで表示された図で利用できる機能は、モーダルで開く（両矢印↔ボタン）コントロールのみでした。

それが現在はコントロールが追加され、図の拡大・縮小、移動、コピーなどができるようになっていました。

右上のコピーコントロールをクリックすると、図のMermaid構文がクリップボードにコピーされます。下記はコピーされたMermaid構文です。

sequenceDiagram
    participant U as User
    participant C as Client
    participant A as Authorization Server
    participant R as Resource Server

    U->>C: 1. ログイン要求
    C->>A: 2. 認可コードリクエスト
    A->>U: 3. 認可コード付きリダイレクト
    U->>C: 4. 認可コードをクライアントへ
    C->>A: 5. 認可コードとクライアント情報を送信
    A->>C: 6. アクセストークンとリフレッシュトークンを発行
    C->>R: 7. アクセストークンを使用してリソースへアクセス
    R->>C: 8. 要求されたリソースを返す

右下のコントロールを操作すると、図の拡大・縮小、移動、戻るが行えます。サイズの大きい図を確認したい際に役立ちそうですね。